// 复制文本
<template>

<div class="copy-txt">

    <div class="txt-content" ref='content'>
        <slot></slot>
    </div>

    <i class="icon iconfont icon-copy" @click.stop='copy'></i>

</div>

</template>

<script lang='ts'>
import {Component, Prop, Vue} from 'vue-property-decorator'
import { copyTxt }  from '@/utils/tools'

@Component({})
export default class copyText extends Vue{
    name:string = 'copyText'
    $Notice:any

    copy(event){
        let ele = this.$refs['content'];
        let txt = copyTxt(ele);

        this.$Notice.success({
            title: `复制成功 : ${txt}`
        })    
    }

    
}


</script>

<style scoped lang='scss'>

.copy-txt{
    position: relative;
    cursor: default;
    background: transparent;
    display: flex;
    align-items: center;

    &:hover{
        .icon{
            display:block;
        }

    }

    .txt-content,
    .icon{
        background: transparent;
        transition: all $transition_time; 
    }

    .icon{

        $size: _rem(30px);
        display: none;
        flex: 0 0 $size;

        margin: _rem(6px);
        width: $size;
        height: $size;
        border-radius: 100%;
        background: $disabled_color;
        text-align: center;
        line-height: $size;
        color: $font_light_color;
        font-size: $icon_size;

        &:hover{
            background: $main_color;
            box-shadow: iconHoverShadow();
        }   
        
    }
}

</style>